@charset "utf-8";
$width:640px;
$height:1136px;
@function w($w){
    @return $w/$width*100%;
}
@function h($h){
    @return $h/$height*100%;
}
.page-1{
    width: 100%;
    height: 100%;
    position: relative;
    background: url(../images/bg-2.png) no-repeat;
    background-size: contain;
    .img-kugou{
        width:w(103px);
        position: absolute;
        left: w(44px);
        top:  h(44px);
    }
    .img-dog-1{
        width: w(173px);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: h(118px);
    }
    .tijiao{
        width:w(140px);
        position: absolute;
        left: w(150px);
        top:  h(937px);
    }
    .play{
        width: w(140px);
        position: absolute;
        top: h(937px);
        left: w(344px);
    }
    .fenxiang{
        display: none;
        top: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(2,5,11,0.9);
        p{
            color: yellow;
            font-size: 18px;
            text-align: right;
        }
        .img-dog2{
            width: w(168px);
            position: absolute;
            top: h(282px);
            left: 50%;
            transform: translateX(-50%);
            
        }
        .danji{
            width: 100%;
            position: absolute;
            top: h(487px);
            color: #FFFFFF;
            font-size: 18px;
            text-align: center;
        }
    }
    input{
        display: none;
    }
    input[name="fenxiang1"]:checked~.fenxiang{
        display: block;
    }
}